<template>
    <div>
    <a-card :bordered="false">
    <a-spin :spinning="confirmLoading" :tip="tips">
    <detail-list title="房屋信息">
        <detail-list-item term="区期">{{houseId.period_message_id_text}}</detail-list-item>
        <detail-list-item term="楼栋">{{houseId.bd_message_id_text}}</detail-list-item>
        <detail-list-item term="单元">{{houseId.unit_message_id_text}}</detail-list-item>
        <detail-list-item term="房间">{{houseId.name}}</detail-list-item>
        <detail-list-item term="类型">{{houseId.type|houseType}}</detail-list-item>
        <detail-list-item term="面积">{{houseId.area}}</detail-list-item>
        <detail-list-item term="户数">{{houseId.numbers}}</detail-list-item>
        <detail-list-item term="面积系数">{{houseId.num_area}}</detail-list-item>
        <detail-list-item term="入住时间">{{houseId.in_time}}</detail-list-item>
        <detail-list-item term="交房时间">{{houseId.get_time}}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <div class="title">缴费列表</div>
        <s-table
            style="margin-bottom: 24px"
            row-key="id"
            :columns="columns"
            :data="loadData"
            :rowSelection="options.rowSelection">
        </s-table>
        <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="goToPay()">缴费</a-button>
    </a-spin>
    
    </a-card>
    <submit-order ref="submitModel" :feeInfo="feeInfo" :housesInfo="houseId" @ok="gotoSubmit" />
    </div>
</template>

<script>
import { STable } from '@/components'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
import { getHouseInfo , getHouseFeeLists } from '@/api/manage'
import { mapGetters } from 'vuex'
import SubmitOrder from '../modules/SubmitOrder'

export default {
  components: {
    DetailList,
    DetailListItem,
    STable,
    SubmitOrder
  },
  data () {
    return {
        columns:[
            {
            title: '名称',
            dataIndex: 'name'
            },
            {
            title: '时间',
            dataIndex: 'feeTimes'
            },
            {
            title: '金额',
            dataIndex: 'price',
            }
        ],
        houseId:0,
        confirmLoading:false,
        tips:'Loading...',
        houseInfo:[],
        selectedRowKeys: [],
        selectedRows: [],
        options: {

            rowSelection: {
                onChange: this.onSelectChange
            }
      },
        optionAlertShow: false,
        loadData:()=>{
           return getHouseFeeLists({token: this.token(), ar_id: this.pmsArId(), cm_mg_id: this.nowMg(),id:this.houseId}).then(res=>{
               return res;
           })
        },
       feeInfo:[]
    
    }
  },
  created () {
   if(this.$route.query.id == undefined){
       this.$router.push({path:'/404'})
   }
   this.houseId=this.$route.query.id
   this.getBasedate()
  },
  filters: {
     houseType (type) {
      const statusMap = {
        '1': '商场',
        '2': '住宅',
        '3': '写字楼'
      }
      return statusMap[type]
    }
  },
  methods:{
    ...mapGetters(['token', 'pmsArId', 'nowMg']),
    getBasedate () {
        this.confirmLoading=true;
        getHouseInfo({token: this.token(), ar_id: this.pmsArId(), cm_mg_id: this.nowMg(),id:this.houseId}).then(res=>{
             this.confirmLoading=false;
             if (res.code == 0) {
                this.houseId=res.data;
             }else{
                 this.$router.go(-1)
             }
        })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.feeInfo=selectedRows
    },
    goToPay () {
        if(this.selectedRows.length>0){
            this.$refs.submitModel.pay();
        }else{
            this.$message.error('请选择收费项目')
            return false;
        }
    },
    gotoSubmit () {
        this.$router.push({name:'FeeResultSuccess'})
    }
  }
}
</script>